import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router/index";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import request from "./utils/request";
import storage from "./utils/storage";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import api from "./api";

// console.log("环境变量=>", import.meta.env);
const app = createApp(App);

app.directive("has", {
  beforeMount: (el, binding) => {
    // console.log(el, binding);
    // 获取按钮权限
    let userAction = storage.getItem("actionList");
    // console.log(userAction);
    let value = binding.value;
    // 判断列表中是否有对应的按钮权限标识
    let hasPermission = userAction.includes(value);
    if (!hasPermission) {
      el.style = "display:none";
      setTimeout(() => {
        el.parentNode.removeChild(el);
      });
    }
  },
});

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.config.globalProperties.$request = request;
app.config.globalProperties.$api = api;
app.config.globalProperties.$storage = storage;
app.use(router).use(store).use(ElementPlus, { size: "" }).mount("#app");
